All right.
In this lecture we're going to take a look at some of the UI constraints available to us.
To help improve the design and functionality of our GUIs.
You will be using UI constraints often in your GIS, because they help you in many different ways.
To take a look at all of the available UI constraints, we can just simply type in UI, and here we'll
pop up all of the different UI constraints available.
For example, you have a UI stroke constraint it says applies an outline around a UI object.
We have a UI corner UI aspect ratio constraint, a gradient, a size constraint, grid layout list layout,
table layouts, UI padding, UI, page layout, text size constraint, and UI scale.
So there's a whole bunch of different constraints here that will change the look of our guys and how
they function.
The first one we should take a look at is going to be the simplest, which is the UI stroke.
So what this is going to do is it's going to apply an outline or a stroke around a particular GUI object.
And if you notice my scrolling frame now has a thin black border around it, and I can increase this
thickness.
For example, if I set it to 20 pixels.
Now I have a 20 pixel stroke around my scrolling frame.
I am able to change the color of this.
If I want to make a green or blue or red, I can do that.
And then I'm also able to change the line join mode, which is going to affect the corners of my UI
stroke.
So if I set it to bevel, it's going to bevel the edges.
Round is of course going to round the edges.
And then this last option is going to make the corners sharp.
And we're also able to adjust the transparency of this as well.
So if I want to make it more transparent, I could do that.
If I want to make it completely transparent, boom or make it completely opaque, boom.
And then there's this other option called apply stroke mode, which is border or contextual.
This setting is specifically for any text related GUI objects.
So for example, if I placed a text label into my screen, guy and I were to take this UI stroke and
place it in the text label, let me go ahead and decrease the thickness here.
What you're going to see is that it has applied that stroke around the text.
So let me scale this text up.
So instead of having to use the text stroke color and the text stroke transparency property of our text
label, instead, we're using a UI stroke.
And this allows us to change the size of the stroke.
So if we want it to be very small, we can do that.
Or if we want to set it to be very large, we can do that as well.
We can adjust the transparency and the color.
We can adjust these different modes.
So if we want to round out the edges, we can do that.
If we want to bevel the edges, we can do that as well.
Or if we want to have them to be sharp with the meter mode, then we can do that as well.
So there's a lot more options here than with the standard properties that are inside of the text label.
If I wanted to apply this stroke to the border of this text label rather than the text itself, then
I can change the apply stroke mode from contextual to border.
So now it's going to be applied on the border and not the text itself.
If I want to apply it to both the border and the text, and then I can simply just make a second one
of these and set this one to be contextual.
So now I have two different strokes on my text label.
The next UI constraint we can go ahead and look at is something called UI corner.
Now UI corner is not going to work on scrolling frames.
So we need to insert a regular frame in here and I'll show you how it works.
Let me go ahead and move this scrolling frame out of the way.
Let me size this one up and let's go ahead and add a UI corner.
So what this is going to do is it's going to round the corners.
And you're able to determine that either with a scale or offset.
So right now the corners are being rounded with a total size of eight pixels.
And if I want to make this rounding even larger I can increase this to be let's say 50 pixels.
So even if I were to resize my screen, the rounding of the corners of this frame is always going to
be 50 pixels in size.
If instead I want this to match the scaling and resizing of the screen, then I can set this to be scale
instead.
And I could do something like this.
So now the rounding of the corners of my object is going to depend on the size of my screen.
And actually let me go ahead and convert this to scale.
Okay.
Now if I go and resize it, you're going to notice that the rounding of the corners has decreased.
And if I increase it, you can see they've gotten larger.
If I instead replace this with a constant let's say 20 pixels.
And then I were to resize my screen.
As you can see it's still going to keep that 20 pixels of rounding.
The next constraint we can go ahead and take a look at is the UI aspect ratio constraint.
And this is specifically for when you want to keep a particular aspect ratio with your objects.
So with this frame, if I were to resize my screen, as you can see the shape of this object has changed.
It's now more elongated.
And if I were to bring this size back down, as you can see now, it resembles more of a cube.
Now let's say I always wanted this frame right here to be in the shape of a cube.
Well, this is where I would add a UI aspect ratio constraint to this object and keep it with an aspect
ratio of one.
So that means the height and the length of this object are going to be the same.
So even if I were to resize my screen, it's always going to stay in the shape of a cube.
If I change the aspect ratio to, let's say the value of three, now the length is going to be three
times the height of my object, and it's going to stay with that particular ratio.
The next constraint we can go in and take a look at is UI gradient.
And this one's very cool because it allows you to make gradient colors.
So let's say I wanted the background of my frame here to be a gradient.
So we'll have a color on one side and it slowly transitions to a different color on the other side.
Well that's what we use a UI gradient for.
So we can open up these three dots right here and define what we want the color to be on the left side.
Let's say I want it to be a nice red.
And then on the right side let's make this color a blue.
So there we go.
Now we have our gradient transitioning from red to blue.
And of course we can insert as many other colors as we want in here.
So I could put a green in the middle.
And now we have a transition from red to green to blue.
And then if I wanted to change the direction that this gradient is being applied, maybe I don't want
it to be from left to right, but maybe I want it to be from a top to bottom.
Then we can go ahead and adjust the rotation property.
So let's go ahead and rotate this by 90 degrees.
And now the gradient is applied at the top.
Go into green and then down to blue.
We can also change the transparency of this color gradient.
And we can even do it over time.
So for example in the beginning.
Maybe I want it to be completely opaque, and then over time, I want the color to fade out like that.
And there you go.
Now you can see behind our object with this nice transparency gradient going on here.
We can also offset this color gradient as well if you need to shift things around.
So shifting it on the x axis isn't going to do anything, but we can shift it on the y axis.
So for example, if I put like a value of ten here we have shifted downwards ten actually let me try
to make this I think this is set with scale.
So if you set this to one yeah it's going to be completely red.
If you do 0.1 and it's going to shift it down a 10th of the height.
And if I do 0.5 then it's going to be half the height.
So that's what the offset property does.
And that's just kind of it with UI gradients.
Now you can take these UI gradients and you can apply them on other things.
For example, if I had a UI stroke on my frame, let me make this thicker and let me set the color to
white.
And then I were to take my UI gradient and put it in my UI stroke.
Now the gradient has been applied to the stroke.
So you can see it starts with red at the top, goes to green, and then slowly fades out to blue until
there's nothing left.
Very cool.
The next constraint here is called a UI size constraint, and as the name suggests, it stops our GUI
from going beyond a maximum size and a minimum size, and this is set in pixels.
So if I want to, let's say, not have my guy go beyond 300 by let's say 100 pixels, then I can do
that.
And then the minimum size may be the minimum size can be, um, I don't know, let's say 150 by 50 pixels.
So if I start to resize my screen, let me try and shrink this down as much as possible.
As you can see, it's going to continue to shrink, but eventually we're going to hit a point where
the size of the GUI is now 50 by 100 pixels or 150 pixels, and it doesn't shrink any more than that,
because that's what we have defined to be the minimum size.
And then for the maximum size, it's going to continue growing as I resize my screen.
But then eventually, as you can see, it has stopped growing.
And that's because it has reached the maximum size.
And you can also see that it still respects our UI aspect ratio constraint.
So even if you were to set the maximum size to be 100 to 100.
What does it say?
Fail to set UI size constraint max.
Oh, let me go ahead and readjust that.
So let me go ahead and set this to like 50.
If I were to set this x to 100, what you're going to notice is that the size isn't going to be set
to 100 by 100 pixels, but it's still going to respect that UI aspect ratio constraint.
But now instead, the size on the x axis is going to be 100 pixels, and then the size on the y axis
is going to be a third of that.
Now these other UI constraints here such as grid layout, the other ones list layout, table layout,
and I believe the last one is page layout.
These are specifically for organizing how objects go into frames, and most of the time you're going
to be using them when you are using scrolling frames.
So let's go ahead and take a look at those.
I'm going to delete this frame here.
And let's go ahead and focus on our scrolling frame.
So let me move this back to the center of the screen.
Now if I add something in here like a UI.
Let's take a look at the list layout.
What this is going to help us do is any time a child is added to our scrolling frame, it's going to
organize it in a list for us.
So let me put a frame inside of here.
Let me change the color to be something different than the background.
And then let me resize this.
So it's something like that.
If I were to duplicate this frame, as you can see, instead of it being in the same position as the
other frame, it has been shifted down.
And as I continued to duplicate, it's going to continue filling them out as a list, and it's filling
up our scrolling frame.
Now, this UI list layout gives me the ability to add padding between the different objects.
So if I wanted to add a five pixel gap between each of the objects, I could do that.
So now, every single time each one of my objects has a five pixel gap, and I can also define what
direction they should be filled in.
So right now it's set to vertical.
So all the objects are going to be filled downwards.
But if I were to set it to horizontal they're all going to be filled in that direction.
The horizontal alignment, as the name suggests, tells me where I like to align these objects.
So if I want to align it to the left, I can do that.
And then there's also vertical alignment.
If we want to put it in the center or on the bottom, we can do that as well.
Now the cool thing about UI list layout is you can use them in conjunction with the scrolling frames.
Automatic canvas size property.
So for example, even if I were to set the canvas size of my scrolling frame to zero because I have
automatic canvas size enabled, you will still see that the scrolling bar is here, and I can scroll
down and go to the very last object in my frame.
And now my scrolling frame perfectly fits all of the elements inside of here.
As I continue to duplicate more and more frames, you can see that the canvas is resizing to accommodate
those additional objects.
So I can continue to scroll.
And there we go.
We fit all of the additional objects that we just duplicated.
Now UI list layout are great for creating lists, but what if we wanted to create a grid of objects
instead?
So instead of having one, one, one in a downwards list, what if we would like to have multiple objects
on the same line as a grid or tile pattern?
Well, let's go ahead and delete these other objects.
Let's get rid of our UI list layout.
And by the way, with my UI list layout now gone, if I were to duplicate the frames, you can see that
nothing is happening because they're all in the same position.
There's no constraint to automatically position them to be one after the other.
So yes, you need to use UI list layouts if you want to create a list.
Now with the UI grid layout.
What this is going to do is it's going to give you some properties for the size of each one of the individual
tiles or cells.
So right now each of those cells are set to 100 by 100 pixels.
But of course you can set them to scale as well.
And now what's going to happen as I duplicate my frames, it's going to now fill it out as a grid,
and it's going to continue filling it out.
And let me go ahead and duplicate a whole bunch of these.
And since I have automatic canvas size enabled, you're going to see that my scrolling frame updates
to fit these additional objects.
So instead of having a list here, now we have a set of objects in their own individual cells or tiles.
Inside of here, I can adjust the padding between them.
So if I want to have greater padding, let's say on the x axis.
So let's do like 20 pixels between.
But on the y axis I want to keep five.
I can totally do that.
And instead of using offset for the cell size, because sometimes people might have smaller screens
that may not be able to accommodate those objects.
What I'm going to do is I'm going to convert my scrolling frame from size in pixels to scale.
So that way it resizes.
Now, what you're going to notice is, as I resize it, all of the elements inside of the scrolling
frame are still remaining the same size, which may not be desired.
Behavior.
Sometimes you might want to scale down the objects inside of the scrolling frame.
So what you want to do with this UI grid layout is you want to convert.
From offset.
Let's go ahead and zero that out and let's change it to scale.
So with a scale on the x axis, if I wanted to let's say put four elements along the x axis, then I
would put the scale size to be 0.25, which is a quarter of the size along the x axis.
And then for the y axis I'm going to set it to a scale of one.
Now what you're going to notice here is that each one of these objects is going to have a giant size,
because it's filling up the entirety of the y axis.
So we have a rectangular shape.
And the other thing you're going to notice is that even though we set the scale to be 0.25, which would
be a quarter, because we have this padding up here of 20 extra pixels between each of the objects.
It wasn't able to fit the fourth element in here.
So to account for that, what you can do with the offset is you can subtract this value by your padding
on the x axis.
So if I do -20 now I am able to fit those four elements because I have reduced the size on the x axis
to account for that particular padding.
Now let's say you still want to keep all of the objects in your grid layout as a cube shape.
So we want to keep it as a square, but you want it to be able to scale along with the size of the screen.
So what we can do is we can actually add a UI aspect ratio constraint as a child of our UI grid layout,
so far nothing has changed, but that's just because we need to update our guy.
So if I just scroll in it, there you go.
Now each one of our objects has been updated to reflect an aspect ratio of one by one.
We can also go ahead and change the sort order of these elements.
And actually let me go ahead and change the padding.
So on the x axis we're going to do an offset of five.
And then for the y axis we're going to keep it at five.
And then let me subtract this value by five instead.
There we go.
So now I have perfectly fit for elements across the x axis.
And then because we are respecting this UI aspect ratio constraint, each one of my objects is a square.
So I can scroll through and take a look at each one of my objects.
Very very cool.
Now, another thing you might wonder is, okay, this is nice and all, but what if I wanted to add
some padding here to the left, or to the top or the bottom of my scrolling frame?
Well, there's another UI constraint for that.
It's called UI padding.
So let's add that in there.
And now we can go ahead and define padding for the right, the left the top and the bottom.
So if I want to move these elements a little bit let's say four pixels from this side over.
Well with the padding on the left, let's go ahead and apply an offset of four pixels.
And now they have been sized four pixels away from the edge of that side of our frame.
We can do the same thing for the top as well.
If we want to do four pixels from the top, we can do that.
Now I have our gap on the top, and then if we want to do the same thing for the bottom, let's say
we want to add an offset down there.
We could do four pixels, hit enter, and it's not really working because it's kind of buggy with the
UI grid layouts.
I believe if we have this set to two or actually no, it, no it's working.
You can see our gap down there.
Never mind okay.
There's our gap on the bottom.
There's our gap on the top.
There's our gap on the side.
And then if we want to add a gap between the objects and our scroll bar right here, then we can go
ahead and do that as well.
UI padding.
Let's go ahead and offset by four pixels on the right.
So now there we go.
We kind of have our four pixel offset ish.
I mean on the right.
It's not working that well.
If we went and enabled, I believe a vertical scroll bar inset and set that to always.
Okay.
Now we have kind of a larger gap between our scroll bar.
And let me see if I disable the UI padding on the right.
What's going to happen.
Yeah, I guess that still works.
The reason why we don't really need an extra gap here is because if you think about it, with our UI
grid layout, we are subtracting the cell size on the x axis by five pixels.
So there's automatically going to be a five pixel gap here.
So technically you don't really need to add a gap on the right.
It's going to be automatically done through our UI grid layout because we're subtracting the size on
the x axis.
But as you can see now we have a neat grid with padding on the top, the left, the bottom, and padding
between each of the objects.
And we can continue to duplicate and add as many of these objects in here as we want.
And our scrolling frame is going to continue to resize to fit all of those objects.
Very, very cool.
There are some other organization type layouts such as tables or page layout.
I'm not going to focus too much on those, because you won't likely use them as often as you will use
UI list layout and UI grid layout.
In fact, with all of the projects that I've personally worked on, I've never used a UI table layout
or a UI page layout.
That doesn't mean that you will never need to use those.
There will probably be some situations where you might want to use them, but I'm not going to discuss
them for now because personally I've never needed to use them.
So the last two UI constraints we're going to take a look at is UI scale and UI text size constraint.
So let's go ahead and get rid of our scrolling frame.
And let's go ahead and add a text label in here.
And let's go ahead and add a UI text size constraint.
This is most useful if you have let's say text scaled enabled.
So if I were to go and increase the size.
So that way my text is at the maximum size possible.
And if I were to decrease the max text size to let's say 30, as you can see, my text label has shrunk
because it's not allowed to go beyond the text size of 30 for the font.
So if I were to resize the label and shrink it down.
You'll see that the label will continue to shrink.
And then if I increase the size, it's going to grow until we hit the limit defined by our UI text size
constraint.
If we want to increase it, we can totally do that.
And then we can decrease it as well.
Kind of the main purpose of this constraint would be for any text labels that you have text scaled enabled
with, but you don't want the text or the size of the font to go beyond a particular size.
For example, if you have some text labels that are acting as a title and some other text labels that
are acting as a description, you're going to want to have the title be larger in font size than the
description.
But if both of those objects have text scaled enabled, then they're going to basically be the same
size depending on how much text you have entered inside of the text box.
So the UI text size constraint allows us to constrain the size of that font whenever we need to.
And then the very last UI constraint is going to be UI.
Let me find it.
Dun dun dun da dun UI scale.
So if I add a UI scale in here, this is basically just going to scale my object up or down.
That's it.
So right now we're at a scale of one, which means it's going to remain the size that it currently is.
But if I were to set this value to, let's say two now my text label is twice the size it normally is.
If I set it to, let's say 0.5, now my text label is half the size that it normally is.
Now, I've never used the UI scale constraint.
There are probably some cases where you might want to use it.
For example, maybe you want to animate a UI element.
So you go ahead and tween this property to scale an object up or down.
I guess that could be one use case for it.
I've never had to personally use it, but it's just another option that the Roblox API gives to developers,
so it's pretty cool.
Now there is a small thing I forgot to mention with UI list layouts and UI grid layouts, and they have
this property called Sort Order and you can set it equal to name or layout order.
If you remember, in a previous lecture I talked about the layout order property, and this is mainly
used with these different layout constraints.
So for example, let me duplicate a couple of these green frames and let me change up their colors a
bit.
Let me make this one blue and then let me make this one red.
Now let's say I actually want the red one to appear on top.
Have the green one in the middle and the blue one on the bottom.
Well, this is where we can utilize the sort order which is set to layout order.
And this is where we manipulate the layout order property in these frames.
For example, if I want the red one to be on top, then I need to keep its layout order at zero, and
I need to adjust the layout order of the green object.
And that's because the higher the layout order number, the lower it's going to be inside of your list
layout or in your grid.
So for example, if I want to shift the green frame downwards, let me go ahead and set the layout order
to ten.
Now this is going to shift it all the way to the bottom, because my blue frame has a layout order of
zero as well.
If I want to put this one at the bottom, then I simply need to enter in a value that is greater than
my green frame, which would be something like 20.
It's best to do these in increments of tens or hundreds, because that way you leave a little bit of
wiggle room in case you need to make any future changes and insert elements between other different
objects in your GUI.
But the layout order allows us to be able to organize things in a list layout or in a grid layout however
we want.
The other option is to sort by name, which means you would sort the different frames by alphabetical
order.
For example, if I called this frame a, it will be at the top.
If I call my red frame C, it would be at the bottom.
And if I called my blue frame B, it's going to be in the middle.
So we have a, b and C.
All right.
That's all from me for this lecture.
And the next lecture we're going to take a look at GUI buttons.
And we're going to listen to some of the events inside of those buttons.
See you there.